<template>
  <div id="login">
    <div class="loginBg">
      <div class="loginAnimal">
        <img src="../assets/img/car.png" class="car" alt="">
      </div>
    </div>
    <div class="login-form">
      <Card>
        <loginForm></loginForm>
      </Card>
    </div>
  </div>
</template>
<script>
import loginForm from "./template/login";
export default {
  data() {
    return {};
  },
  name: "login",
  components: { loginForm }
};
</script>
<style lang="less" scoped>
.loginBg {
  position: fixed;
  width: 100%;
  min-width: 720px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("../assets/img/bg1.jpg");
  .loginAnimal {
    animation: bg 5s linear infinite;
    background: url("../assets/img/sun.png") 50% 0% no-repeat;
    // background-position: 0 0;
    background-size: contain;
    margin: 200px 0 0 8px;
    height: 400px;
    width: 100%;
    max-width: 450px;
    position: relative;
    .car {
      width: 3rem;
      position: absolute;
      top: 25%;
      animation: carRun 6s linear infinite;
    }
  }
}
.login-form {
  width: 400px;
  position: absolute;
  top: 200px;
  right: 10%;
}
@keyframes carRun {
  0% {
    left: 10%;
  }
  100% {
    left: 75%;
  }
}
@keyframes bg {
  to,
  from {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(15px);
  }
}
</style>

